<!--# layout("/common/layout.html",{"jsBase":"/js/orgmain/orgMain/"}){ -->
<style type="text/css">
    .uploader-list {
        margin-left: -15px;
    }

    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle span {
        margin-right: 10px;
    }

    .uploader-list .handle span:hover {
        cursor: pointer;
    }

    .uploader-list .file-iteme {
        margin: 12px 0 0 15px;
        padding: 1px;
        float: left;
    }
</style>
<form class="layui-form layui-form-pane" id="addForm" enctype="multipart/form-data"  lay-filter="editform">

    <input type="hidden" name="orgId" id="orgId">

    <br>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">上级组织</label>
				<div class="layui-input-inline">
                    <layui:simpleDataSelect name="orgPid" value="" data="${orgMainList}" lay-verify="required"
                                            lay-search="true"  attrId="orgId" attrName="orgName" layFilter="colFilter" id="orgPid" />
				</div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">子机构名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="orgName" id="orgName" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">机构省份</label>
                <div class="layui-input-inline">
                    <layui:simpleDataSelect name="provinceId" value="" data="${provinceList}"
                                            attrId="provId" attrName="provName" layFilter="colFilter" id="provinceId"  laySearch="true"/>
                </div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">办事处</label>
				<div class="layui-input-inline">
                    <input type="text" name="subName" id="subName" autocomplete="off" maxlength="50" class="layui-input" >
				</div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">组织级别</label>
                <div class="layui-input-inline">
                    <select name="orgLevel" lay-verify="required" lay-search>
                        <option value="">请选择级别</option>
                        <option value="分公司">分公司</option>
                        <option value="办事处">办事处</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">办公地址</label>
				<div class="layui-input-inline">
                    <input type="text" name="orgAddr" id="orgAddr" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
				</div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">联系人</label>
                <div class="layui-input-inline">
                    <input type="text" name="contactMan" id="contactMan" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="contactPhone" id="contactPhone" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">定位名称</label>
				<div class="layui-input-inline">
                    <input type="text" name="locationName" id="locationName" autocomplete="off" maxlength="50" class="layui-input" >
				</div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">地图坐标</label>
				<div class="layui-input-inline">
                    <input type="text" name="locationPoint" id="locationPoint" autocomplete="off" maxlength="50" class="layui-input" lay-verify="required">
				</div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <layui:image id="mainImg" tagName="机构主图" tips=""/>

        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
              <div class="layui-upload">
        <label class="layui-form-label" style="width: 120px">办公图片</label>
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <!-- <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->
        <!-- <div class="layui-upload-list" id="demo2"></div>-->
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 650px;">
            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">

            </div>
        </blockquote>
        <input type="hidden" name="orgImgs" id="orgImgs">
    </div>
        </div>
    </div>

    <layui:submitButtons id="addButton" />
</form>
<!--#} -->
<script>


    $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
        if(event.type === "mouseenter"){
            //鼠标悬浮
            $(this).children(".info").fadeIn("fast");
            $(this).children(".handle").fadeIn("fast");
        }else if(event.type === "mouseleave") {
            //鼠标离开
            $(this).children(".info").hide();
            $(this).children(".handle").hide();
        }
    });
    // 删除图片
    $(document).on("click", ".file-iteme .handle", function(event){
        $(this).parent().remove();
        var lectureImgs ="";
        $("#uploader-list img").each(function(){
            var img = $(this).attr("src");
            if(img!=null&&img!=""){
                lectureImgs += img+"@";
            }
        });
        $("#orgImgs").val(lectureImgs.substr(0,lectureImgs.length-1));


    });

    Common.initImage();
layui.extend({
    loading: '../../../plugins/layui_extends/loading/loading',
}).define([ 'form', 'laydate', 'table','loading','orgMainApi','upload'], function(exports) {
    var form = layui.form;
    var upload = layui.upload;
    var orgmainApi = layui.orgMainApi;
    console.log(orgmainApi);
    var index = layui.index;
    var isNew = true;
    <!--# if(!(isEmpty(orgmainJson))){  -->
    isNew = false;
    var imgs = "${orgmain.orgImgs}";
    if(imgs!=null&&imgs!=""){
        var arr = imgs.split("@");
        for ( var i = 0; i <arr.length; i++){
            $('#uploader-list').append(
                '<div id="" class="file-iteme">' +
                '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                '<img style="width: 100px;height: 100px;" src='+ arr[i] +'>' +
                '</div>'
            );
        }
    }
    <!--# } -->
    var view = {
        init:function(){
            Lib.initGenrealForm($("#addForm"),form);

            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: '${ctxPath}/orgmain/orgmain/upload.json'
                ,multiple: true
                ,before: function(obj){

                }
                ,done: function(res){
                    //上传完毕
                    if(res.state=='SUCCESS'){

                        $('#uploader-list').append(
                            '<div id="" class="file-iteme">' +
                            '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                            '<img style="width: 100px;height: 100px;" src='+ res.url +'>' +
                            '</div>'
                        );

                        var orgImgs = $("#orgImgs").val();
                        if(!orgImgs){
                            orgImgs += res.url;
                        }else{
                            orgImgs += "@"+res.url;
                        }
                        $("#orgImgs").val(orgImgs);
                    }
                }
            });

            this.initSubmit();
        },
        initSubmit:function(){
            $("#addButton").click(function(){
                form.on('submit(form)', function(){
                    orgmainApi.saveForm(isNew,$('#addForm'),function(){
                        parent.window.dataReload();
                        Common.info("保存成功");
                        Lib.closeFrame();
                    });
                });
            });
            $("#addButton-cancel").click(function(){
                Lib.closeFrame();
            });
        }
    }
    view.init();
    <!--# if(!(isEmpty(orgmainJson))){  -->
    var formJson = ${orgmainJson};
    form.val("editform",formJson);
    $(".image-preview").each(function() {
        $(this).attr("src",formJson[$(this).attr("id")]);
    });
    $(".file_link").each(function() {
        var a=document.createElement('a');
        var aJq = $(a);
        aJq.html("下载文件");
        aJq.attr("href",formJson[$(this).attr("id")]);
        aJq.attr("target","_blank");
        $(this).append(aJq);
    });
    <!--# } -->
});
</script>
